<template>
  <div>
    <div class="backgroundstyle">
      <div class="backBtn" @click="$router.back(-1)">
        <i class="icon iconfont icon-back"></i>
      </div>
      <div class="bgLayer">
        <img src="/static/img/img_vip.jpg" />
      </div>
      <div class="vipfoot">
        <div class="left">
          <span>超值价</span><span class="strong">{{ nowPrice }}</span
          ><span>元/年</span>
        </div>
        <div class="right" @click="goRechargeFn">
          <span>立即开通</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  MemberPriceUrl,
  JifenUnifiedOrder,
  JifenNotify,
  JifenOrderQuery,
  ConfigJs
} from "@/api/login";
import { Toast } from "vant";
export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      datalist: [],
      page: 1,
      pageSize: 100,
      traderType: "",
      cityId: "",
      orderNum: false,
      Latitude: "",
      Longitude: "",
      nowPrice: 0
    };
  },
  created() {
    this.getConfig();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      MemberPriceUrl().then(res => {
        console.log(res);
        if (res.data.errCode == 0) {
          this.datalist = res.data.data;
          if (res.data.data && res.data.data.length > 0) {
            res.data.data.map(item => {
              if (item.memberType && item.memberType == 2) {
                this.nowPrice = item.price;
              }
            });
          }
        }
      });
    },
    goRechargeFn() {
      console.log(999);
      JifenUnifiedOrder().then(res => {
        console.log(res);
        if (res.data.errCode == 0) {
          this.payinfo = res.data.data;
          this.pay();
        }
      });
    },
    pay() {
      console.log(this.payinfo);
      if (this.payinfo && this.payinfo.timeStamp) {
        let that = this;
        wx.chooseWXPay({
          appId:'wx9b4743a1848616d3',
          timestamp: this.payinfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: this.payinfo.nonceStr, // 支付签名随机串，不长于 32 位
          package: this.payinfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: this.payinfo.paySign, // 支付签名
          success: function(res) {
            // 支付成功后的回调函数
            console.log(res);
            that.orderQuery();
          },
          cancel: function(res) {
            console.log(res);
          },
          fail: function(res) {
            console.log(res);
            //支付失败
          }
        });
      } else {
        Toast("获取支付信息失败,请重试");
      }
    },
    getConfig() {
      ConfigJs(window.location.href).then(res => {
        console.log(res);
        let data = res.data.data;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名
          jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
        });
      });
    },
    OrderQuery() {
      var _this = this;
      JifenOrderQuery(this.payinfo.outNo).then(res => {
        console.log(res);
        if (res.data.data != "支付成功") {
          setTimeout(function() {
            _this.OrderQuery();
          }, 2000);
        } else {
          //Toast(res.data.data);
          //this.$router.push('/my')
        }
        setTimeout(function() {
          this.$router.push("/my");
        }, 4000);
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.backgroundstyle {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #000002;
}
.backBtn {
  width: 1.25rem;
  height: 1.25rem;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 170, 255, 0.5)),
    to(rgba(0, 133, 255, 0.5))
  );
  background: linear-gradient(
    90deg,
    rgba(0, 170, 255, 0.5),
    rgba(0, 133, 255, 0.5)
  );
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  position: fixed;
  top: 0.44rem;
  left: 0.44rem;
  z-index: 9999;
  border-radius: 50%;
  overflow: hidden;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.backBtn i {
  font-size: 0.64rem;
  font-weight: 700;
  color: #fff;
}
.bgLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bgLayer img {
  width: 100%;
}
.vipfoot {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#d5b9af),
    to(#df9618)
  );
  background: linear-gradient(90deg, #d5b9af, #df9618);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.42rem;
  overflow: hidden;
}
.left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 65%;
  height: 1.42rem;
  float: left;
}
.left span {
  font-size: 0.6rem;
  text-align: center;
  color: #412100;
}
.left span {
  font-size: 0.6rem;
  text-align: center;
  color: #412100;
}
.left span.strong {
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: #0e0300;
}
.left span {
  font-size: 0.6rem;
  text-align: center;
  color: #412100;
}
.right {
  width: 30%;
  height: inherit;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#2a2016),
    to(#1b1515)
  );
  background: linear-gradient(90deg, #2a2016, #1b1515);
  float: right;
}
.right span {
  font-size: 0.4rem;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#d5b9af),
    to(#df9618)
  );
  background: linear-gradient(90deg, #d5b9af, #df9618);
  -webkit-background-clip: text;
  color: transparent;
  width: 100%;
  height: 1.42rem;
  line-height: 1.42rem;
  display: block;
}
</style>
